Создание диаграмм с помощью Google Chart 2015
Представляем Вам небольшой Премиум курс по созданию диаграмм с помощью Google Chart.
В нескольких уроках данного курса мы с Вами познакомимся с API Google-диаграмм (Google Charts). Данное API позволяет легко добавлять на страницы вашего сайта всевозможные диаграммы. При этом это могут быть как стандартные диаграммы, так и довольно оригинальные.
Курс позволит Вам не только получить навыки работы с API Google-диаграмм, но и освежит знания в таких областях, как работа с JavaScript, jQuery, AJAX, PHP и т.д.
Диаграммы, создаваемые в данном курсе безусловно станут украшением любого сайта, так или иначе работающего со статистикой. Используя построенные диаграммы, Вы визуализируете данные, тем самым сделав их более понятными и наглядными. А добавлением анимации оживит построенные диаграммы.
Значительное внимание в курсе по созданию диаграмм с помощью Google Chart уделено получению данных из внешнего хранилища (базы данных) и, соответственно, построению диаграмм на динамических (изменяемых), а не статических данных.
Видеокурс по API Google Charts на русском языке, с примерами для начинающих и продолжающих.


Урок 1. Установка и настройка:
От автора: В нескольких уроках мы с вами познакомимся с API Google-диаграмм (Google Charts). Данное API позволяет легко добавлять на страницы вашего сайта всевозможные диаграммы. При этом это могут быть как стандартные диаграммы, так и довольно оригинальные. Примеры возможных диаграмм вы можете найти в документации по API Google Charts.
В данном уроке мы рассмотрим с вами простые примеры добавления диаграмм на страницу, а также поработаем с настройками для данных диаграмм. Данные, используемые для построения диаграмм, пока что будут статичными, т.е. находиться непосредственно на странице скрипта. В следующем уроке мы уже научимся работать с динамичными данными, т.е. данными, получаемыми из базы данных.


Урок 2. Получение данных:
От автора: В этом уроке мы продолжим работу с API Google-диаграмм (Google Charts). Пока что мы используем статичные данные для построения диаграммы, т.е. данные, которые находятся непосредственно в скрипте. Это не очень удобно, поскольку данные могут изменяться, и в таком случае придется лезть в скрипт и изменять данные вручную. Хотелось бы, чтобы данные были динамичными, т.е. чтобы они получались извне и диаграмма строилась на этих данных. В уроке мы научимся получать данные из внешнего хранилища (базы данных).


Урок 3. Получение данных:
От автора: В этом уроке мы продолжим работу с API Google-диаграмм (Google Charts). На данный момент у нас есть функция, формирующая данные сразу в формате строки JSON. В этом уроке мы попробуем написать функцию, которая будет формировать массив нужного нам формата, ну а затем мы просто преобразуем массив в формат JSON.


Урок 4. Анимирование графиков:
От автора: В этом уроке мы продолжим работу с API Google-диаграмм (Google Charts). Итак, мы уже можем получать данные из внешнего хранилища и строить по ним диаграммы. Теперь давайте добавим привлекательности, используя возможности анимации в API Google Charts.
Для реализации анимации графика мы должны отрисовывать график дважды. Первый раз он будет отрисован с нулевыми данными, т.е. фактически на странице мы увидим только шкалу для графика. Во второй раз график будет отрисован по реальным данным. Для этого нам необходимо дважды вызывать метод draw(), передавая объект data с различными данными (нулевыми и реальными).
Сразу стоит отметить, что анимацию поддерживают не все виды диаграмм. Например, круговая диаграмма (PieChart) не поддерживает возможности анимации, а вот столбцовая диаграмма (ColumnChart) позволяет использовать анимирование.